
<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Scroller',
  props: {
    handleToScroll: {
      type: Function,
      default: function () {}
    },
    handleToTouchEnd: {
      type: Function,
      default: function () {}
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      var scroll = new BScroll(this.$refs.wrapper, {
        tap: true,
        probeType: 1,
        scrollY: true
      })
      this.scroll = scroll
      this.scroll.on('scroll', pos => {
        this.handleToScroll(pos)
      })
      this.scroll.on('touchEnd', pos => {
        this.handleToTouchEnd(pos)
      })
    })
  },
  methods: {
    toScrollTop (y, time) {
      this.scroll.scrollTo(0, y, time)
    }
  },
  watch: {
    refresh: function (newVal) {
      if (newVal) {
        console.log('better-scroller重新计算')
        this.scroll.refresh()
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  height: 100%;
  width: 100%;
}
</style>
